<template>
  <el-carousel :interval="4000" type="card" height="400px" :autoplay="true">
    <el-carousel-item v-for="(image, index) in carouselImages" :key="index">
      <div class="carousel-card">
        <img :src="image.src" :alt="image.alt" class="carousel-image" />
        <div class="carousel-caption">
          {{ image.caption }}
        </div>
      </div>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  data() {
    return {
      // 使用原来的本地文件路径
      carouselImages: [
        { src: '/src/assets/images/yaocai/01.png', alt: '01', caption: '人参的药用价值' },
        { src: '/src/assets/images/yaocai/02.png', alt: '02', caption: '黄芪的养生功效' },
        { src: '/src/assets/images/yaocai/03.png', alt: '03', caption: '当归补血养颜' },
        { src: '/src/assets/images/yaocai/04.png', alt: '04', caption: '枸杞子明目护肝' },
        { src: '/src/assets/images/yaocai/05.png', alt: '05', caption: '中药材科普介绍' },
        { src: '/src/assets/images/yaocai/06.png', alt: '06', caption: '中医药文化传承' }
      ]
    };
  }
};
</script>

<style scoped>
/* 设置轮播图卡片容器样式 */

.carousel-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 400px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  background-color: red;
  overflow: hidden;
  margin: 0 auto;
}

/* 设置轮播图图片样式 */
.carousel-image {
  width: 100%;
  height: 70%; /* 图片高度占卡片的75% */
  object-fit: cover; /* 确保图片覆盖整个容器 */
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* 设置轮播图文字说明样式 */
.carousel-caption {
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  color: white;
  font-size: 1.2em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  background-color: rgba(0, 0, 0, 0.4);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* 针对卡片类型轮播图的额外样式 */
.el-carousel__item {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>